<template>
    <div style="width:100%;height:100%;overflow: hidden;">
     <div id="main-map"></div>
    </div>
</template>
<script>
import data from '../../public/data/creditCardData.json';
import sty from '../../public/style/consumption.json';
import map from '../../js/getmap'

export default {
    data () {
        return {
         map:null,
         jj:null,
         ff:null
        }
    },
     mounted() {
        this.getmap()
    },
    methods:{
          getmap () {
          this.smartmapx.mapbase = 'http://www.smartmapx.com';
          console.log( this.smartmapx)
          this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
          this.map=new this.smartmapx.Map({
              container: 'main-map',
              mapId: 'map_id_1',
              center: [117.18423,39.040199],
              zoom: 9
            });
            this.map.addControl(new this.smartmapx.NavigationControl(),'top-right');
            this.map.addControl(new this.smartmapx.ScaleControl({
              maxWidth: 100,
              unit: 'm'
            }));
            this.jj=data.consumption;
            this.ff=sty.consumption;
            this.map.on('load',()=>{
            this.map.addSource('hot',{
              type:'geojson',
              data:this.jj
            })
            this.map.addLayer( this.ff)
          })
        }
    },
}
</script>
<style lang="scss" scoped>
#main-map{
    width:100%;
    height: 100%;
    overflow: hidden;
}
</style>